﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/layui_ext/dtree/dtree.css" rel="stylesheet" />
    <link href="~/layui_ext/dtree/font/dtreefont.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
</head>
<body>

    <input type="button" id="btn1" class="layui-btn" value="选中武汉市" />
    <input type="button" id="btn2" class="layui-btn" value="得到选中值" />

    <ul id="demoTree" class="dtree" data-id="0"></ul>

    <script>

        layui.extend({
            dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
        }).use(['dtree', 'layer', 'jquery'], function () {
            var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;

            // 初始化树
            var DemoTree = dtree.render({
                elem: "#demoTree",
                method: "get",
                //data: demoTree, // 使用data加载
                url: "/json/case/asyncTree1.json", // 使用url加载（可与data加载同时存在）
                dataFormat: "list",  //配置data的风格为list
            });

            // 树状态改变（收缩/张开）后，用户自定义想做的事情
            dtree.on("changeTree('demoTree')", function (obj) {
                console.log(obj.param); // 点击当前节点传递的参数
                console.log(obj.dom); // 当前节点的jquery对象
                console.log(obj.show); // 节点展开为true，关闭为false
            });


            // 绑定节点点击
            dtree.on("node('demoTree')", function (obj) {

                layer.alert(JSON.stringify(obj.param));


                console.log(obj.param); //点击当前节点传递的参数
                console.log(obj.dom); //当前节点jquery对象
                console.log(obj.childParams); //当前节点的所有子节点参数
                console.log(obj.parentParam); //当前节点的父节点参数

                //layer.msg();
                //layer.msg(JSON.stringify(obj.param));
            });

            // 节点双击事件
            //dtree.on("nodedblclick('demoTree')", function (obj) {
            //    console.log(obj.param); // 点击当前节点传递的参数
            //    console.log(obj.dom); // 当前节点的jquery对象
            //    console.log(obj.childParams); // 当前节点的所有子节点参数
            //    console.log(obj.parentParam); // 当前节点的父节点参数
            //});

            //初始化选中树节点
            $('#btn1').click(function () {
                var params = dtree.dataInit("demoTree", "002001");
            });

            $('#btn2').click(function () {
                var param = dtree.getNowParam(DemoTree);
                console.log(param);

            });


        });

    </script>

</body>
</html>
